<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="计划编号" prop="transportPlanNumber">
        <el-input
          v-model="queryParams.transportPlanNumber"
          placeholder="请输入计划编号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="计划状态" prop="transportPlanStatus">
        <el-select v-model="queryParams.transportPlanStatus" placeholder="请选择计划状态" clearable>
          <el-option
            v-for="dict in dict.type.transport_plan_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发运日期">
        <el-date-picker
          v-model="daterangeDispatchDate"
          style="width: 205px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="发货客户" prop="sendGoodsCustomer">
        <el-select v-model="queryParams.sendGoodsCustomer" placeholder="请选择发货客户" clearable>
          <el-option
            v-for="dict in customerOptions"
            :key="dict.customerId"
            :label="dict.customerName"
            :value="dict.customerName"
          />
        </el-select>
      </el-form-item>
      <!--el-form-item label="发货人" prop="sendGoodsPerson">
        <el-input
          v-model="queryParams.sendGoodsPerson"
          placeholder="请输入发货人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="发货电话" prop="sendGoodsMobile">
        <el-input
          v-model="queryParams.sendGoodsMobile"
          placeholder="请输入发货电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item-->
      <el-form-item label="始发流向" prop="beginFlowDirection">
        <el-input
          v-model="queryParams.beginFlowDirection"
          placeholder="请输入始发流向"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--el-form-item label="发货地址" prop="sendGoodsAddress">
        <el-input
          v-model="queryParams.sendGoodsAddress"
          placeholder="请输入发货地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item-->
      <el-form-item label="收货客户" prop="receiveGoodsCustomer">
        <el-select v-model="queryParams.receiveGoodsCustomer" placeholder="请选择收货客户" clearable>
          <el-option
            v-for="dict in customerOptions"
            :key="dict.customerId"
            :label="dict.customerName"
            :value="dict.customerName"
          />
        </el-select>
      </el-form-item>
      <!--el-form-item label="收货人" prop="receiveGoodsPerson">
        <el-input
          v-model="queryParams.receiveGoodsPerson"
          placeholder="请输入收货人"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收货电话" prop="receiveGoodsMobile">
        <el-input
          v-model="queryParams.receiveGoodsMobile"
          placeholder="请输入收货电话"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item-->
      <el-form-item label="目的流向" prop="endFlowDirection">
        <el-input
          v-model="queryParams.endFlowDirection"
          placeholder="请输入目的流向"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--el-form-item label="收货地址" prop="receiveGoodsAddress">
        <el-input
          v-model="queryParams.receiveGoodsAddress"
          placeholder="请输入收货地址"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="货物类型" prop="goodsType">
        <el-select v-model="queryParams.goodsType" placeholder="请选择货物类型" clearable>
          <el-option
            v-for="dict in dict.type.goods_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="重量(吨)" prop="freightWeight">
        <el-input
          v-model="queryParams.freightWeight"
          placeholder="请输入重量(吨)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="件数" prop="freightPiece">
        <el-input
          v-model="queryParams.freightPiece"
          placeholder="请输入件数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="已发车数" prop="despatchVehicleNumber">
        <el-input
          v-model="queryParams.despatchVehicleNumber"
          placeholder="请输入已发车数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="已发重量(吨)" prop="despatchWeight">
        <el-input
          v-model="queryParams.despatchWeight"
          placeholder="请输入已发重量(吨)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="已发件数" prop="despatchPiece">
        <el-input
          v-model="queryParams.despatchPiece"
          placeholder="请输入已发件数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="剩余重量(吨)" prop="remainWeight">
        <el-input
          v-model="queryParams.remainWeight"
          placeholder="请输入剩余重量(吨)"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="剩余件数" prop="remainPiece">
        <el-input
          v-model="queryParams.remainPiece"
          placeholder="请输入剩余件数"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="派车号码" prop="dispatchVehicleNumber">
        <el-input
          v-model="queryParams.dispatchVehicleNumber"
          placeholder="请输入派车号码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
          v-model="queryParams.remark"
          placeholder="请输入备注"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="园区代码" prop="parkCode">
        <el-input
          v-model="queryParams.parkCode"
          placeholder="请输入园区代码"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建者" prop="createBy">
        <el-input
          v-model="queryParams.createBy"
          placeholder="请输入创建者"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="daterangeCreateTime"
          style="width: 205px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item-->
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['transport:plan:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['transport:plan:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['transport:plan:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['transport:plan:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" @computeTable="computeTableHeight"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" ref="dataList" :data="planList" @selection-change="handleSelectionChange" @row-click="handleRowClick" border :height="tableHeight" :row-style="{height:'35px'}" :cell-style="{padding:'0px'}">
      <el-table-column type="selection" width="45" align="center" />
      <el-table-column type="index" prop="" width="55" label="序号" align="center" >
        <template slot-scope="scope">
          <span>{{ scope.$index+1 +(queryParams.pageNum-1)*queryParams.pageSize }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100%">
        <template slot-scope="scope">
          <!--el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['transport:plan:edit']"
          >修改</el-button-->
          <!--el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['transport:plan:remove']"
          >删除</el-button-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-guide"
            @click="handleDispatch(scope.row)"
            v-hasPermi="['transport:plan:dispatch']"
          >派车</el-button>
        </template>
      </el-table-column>
      <!--el-table-column label="计划ID" align="center" prop="transportPlanId" /-->
      <el-table-column label="计划编号" align="center" prop="transportPlanNumber" width="160" :show-overflow-tooltip="true" />
      <el-table-column label="计划状态" align="center" prop="transportPlanStatus" />
      <el-table-column label="发运日期" align="center" prop="dispatchDate" width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.dispatchDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发货客户" align="center" prop="sendGoodsCustomer" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="发货人" align="center" prop="sendGoodsPerson" />
      <el-table-column label="发货电话" align="center" prop="sendGoodsMobile" width="130" />
      <!--el-table-column label="始发流向" align="center" prop="beginFlowDirection" width="80" :show-overflow-tooltip="true" /-->
      <el-table-column label="发货地址" align="center" prop="sendGoodsAddress" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="收货客户" align="center" prop="receiveGoodsCustomer" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="收货人" align="center" prop="receiveGoodsPerson" />
      <el-table-column label="收货电话" align="center" prop="receiveGoodsMobile" width="130" />
      <!--el-table-column label="目的流向" align="center" prop="endFlowDirection" width="80" :show-overflow-tooltip="true" /-->
      <el-table-column label="收货地址" align="center" prop="receiveGoodsAddress" width="240" :show-overflow-tooltip="true" />
      <el-table-column label="货物类型" align="center" prop="goodsType" />
      <el-table-column label="重量(吨)" align="center" prop="freightWeight" />
      <el-table-column label="件数" align="center" prop="freightPiece" />
      <el-table-column label="已发车数" align="center" prop="despatchVehicleNumber" />
      <el-table-column label="已发重量(吨)" align="center" prop="despatchWeight" width="100" />
      <el-table-column label="已发件数" align="center" prop="despatchPiece" />
      <el-table-column label="剩余重量(吨)" align="center" prop="remainWeight" width="100" />
      <el-table-column label="剩余件数" align="center" prop="remainPiece" />
      <el-table-column label="派车号码" align="center" prop="dispatchVehicleNumber" width="480" :show-overflow-tooltip="true" />
      <el-table-column label="备注" align="center" prop="remark" width="180" :show-overflow-tooltip="true" />
      <el-table-column label="创建者" align="center" prop="createBy" />
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!--Waybill Detail-->
    <div class="line" />

    <waybillDetail ref="waybillDetail" />

    <!-- 添加或修改运输计划对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1340px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true" size="small">
        <!--el-form-item label="计划编号" prop="transportPlanNumber">
          <el-input v-model="form.transportPlanNumber" placeholder="请输入计划编号" clearable />
        </el-form-item>
        <el-form-item label="计划状态" prop="transportPlanStatus">
          <el-select v-model="form.transportPlanStatus" placeholder="请选择计划状态" clearable>
            <el-option
              v-for="dict in dict.type.transport_plan_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item-->
        <el-form-item label="发运日期" prop="dispatchDate">
          <el-date-picker clearable
            v-model="form.dispatchDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择发运日期"
            >
          </el-date-picker>
        </el-form-item>
        <div class="dashed-line" />
        <el-form-item label="发货客户" prop="sendGoodsCustomer">
          <el-select v-model="form.sendGoodsCustomer" placeholder="请选择发货客户" clearable>
            <el-option
              v-for="dict in customerOptions"
              :key="dict.customerId"
              :label="dict.customerName"
              :value="dict.customerName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发货人" prop="sendGoodsPerson">
          <el-input v-model="form.sendGoodsPerson" placeholder="请输入发货人" clearable />
        </el-form-item>
        <el-form-item label="发货电话" prop="sendGoodsMobile">
          <el-input v-model="form.sendGoodsMobile" placeholder="请输入发货电话" clearable />
        </el-form-item>
        <el-form-item label="始发流向" prop="beginFlowDirection">
          <el-input v-model="form.beginFlowDirection" placeholder="请输入始发流向" clearable />
        </el-form-item>
        <el-form-item label="发货地址" prop="sendGoodsAddress">
          <el-input v-model="form.sendGoodsAddress" placeholder="请输入发货地址" clearable class="address" />
        </el-form-item>
        <div class="dashed-line" />
        <el-form-item label="收货客户" prop="receiveGoodsCustomer">
          <el-select v-model="form.receiveGoodsCustomer" placeholder="请选择收货客户" clearable>
            <el-option
              v-for="dict in customerOptions"
              :key="dict.customerId"
              :label="dict.customerName"
              :value="dict.customerName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收货人" prop="receiveGoodsPerson">
          <el-input v-model="form.receiveGoodsPerson" placeholder="请输入收货人" clearable />
        </el-form-item>
        <el-form-item label="收货电话" prop="receiveGoodsMobile">
          <el-input v-model="form.receiveGoodsMobile" placeholder="请输入收货电话" clearable />
        </el-form-item>
        <el-form-item label="目的流向" prop="endFlowDirection">
          <el-input v-model="form.endFlowDirection" placeholder="请输入目的流向" clearable />
        </el-form-item>
        <el-form-item label="收货地址" prop="receiveGoodsAddress">
          <el-input v-model="form.receiveGoodsAddress" placeholder="请输入收货地址" clearable class="address" />
        </el-form-item>
        <div class="dashed-line" />
        <el-form-item label="货物类型" prop="goodsType">
          <el-select v-model="form.goodsType" placeholder="请选择货物类型" clearable>
            <el-option
              v-for="dict in dict.type.goods_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="重量(吨)" prop="freightWeight">
          <el-input v-model="form.freightWeight" placeholder="请输入重量(吨)" clearable @change="handleRemain" />
        </el-form-item>
        <el-form-item label="件数" prop="freightPiece">
          <el-input v-model="form.freightPiece" placeholder="请输入件数" clearable @change="handleRemain" />
        </el-form-item>
        <!--el-form-item label="已发车数" prop="despatchVehicleNumber">
          <el-input v-model="form.despatchVehicleNumber" placeholder="请输入已发车数" clearable />
        </el-form-item>
        <el-form-item label="已发重量(吨)" prop="despatchWeight">
          <el-input v-model="form.despatchWeight" placeholder="请输入已发重量(吨)" clearable />
        </el-form-item>
        <el-form-item label="已发件数" prop="despatchPiece">
          <el-input v-model="form.despatchPiece" placeholder="请输入已发件数" clearable />
        </el-form-item>
        <el-form-item label="剩余重量(吨)" prop="remainWeight">
          <el-input v-model="form.remainWeight" placeholder="请输入剩余重量(吨)" clearable />
        </el-form-item>
        <el-form-item label="剩余件数" prop="remainPiece">
          <el-input v-model="form.remainPiece" placeholder="请输入剩余件数" clearable />
        </el-form-item-->
        <!--el-form-item label="派车号码" prop="dispatchVehicleNumber">
          <el-input v-model="form.dispatchVehicleNumber" placeholder="请输入派车号码" clearable />
        </el-form-item-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" clearable />
        </el-form-item>
        <!--el-form-item label="园区代码" prop="parkCode">
          <el-input v-model="form.parkCode" placeholder="请输入园区代码" clearable />
        </el-form-item-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <dispatchDialog ref="dispatchDialog" title="派车作业" open="false" style="display: none;"/>
    <dispatchDialogExt ref="dispatchDialogExt" title="派车作业" open="false" style="display: none;"/>
  </div>
</template>

<script>
import { listPlan, getPlan, delPlan, addPlan, updatePlan } from "@/api/transport/plan";
import { listCustomerOption } from "@/api/customs/custom";
import { listFlowOption, updateFlow } from "@/api/system/flow";
import dispatchDialog from "./dispatchDialog";
import dispatchDialogExt from "./dispatchDialogExt";
import waybillDetail from "./waybillDetail";
import { isNotNull } from "@/utils/validate";

export default {
  components: {
    dispatchDialog,
    dispatchDialogExt,
    waybillDetail,
  },
  name: "Plan",
  dicts: ['transport_plan_status', 'sys_yes_no', 'goods_type'],
  data() {
    return {
      // 定义列表高度
      tableHeight: 430,
      // 定义查询高度
      queryHeight: 200,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 运输计划表格数据
      planList: [],
      //选择列表
      selectList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 园区代码时间范围
      daterangeDispatchDate: [],
      // 园区代码时间范围
      daterangeCreateTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        transportPlanNumber: null,
        transportPlanStatus: null,
        dispatchDate: null,
        sendGoodsCustomer: null,
        sendGoodsPerson: null,
        sendGoodsMobile: null,
        beginFlowDirection: null,
        sendGoodsAddress: null,
        receiveGoodsCustomer: null,
        receiveGoodsPerson: null,
        receiveGoodsMobile: null,
        endFlowDirection: null,
        receiveGoodsAddress: null,
        goodsType: null,
        freightWeight: null,
        freightPiece: null,
        despatchVehicleNumber: null,
        despatchWeight: null,
        despatchPiece: null,
        remainWeight: null,
        remainPiece: null,
        dispatchVehicleNumber: null,
        remark: null,
        parkCode: null,
        createBy: null,
        createTime: null,
      },
      // 表单参数
      form: {},
      // 字典项客户
      customerOptions: [],
      // 字典项流向
      flowOptions: [],
      // 表单校验
      rules: {
        dispatchDate: [
          { required: true, message: "发运日期不能为空", trigger: "blur" }
        ],
        sendGoodsCustomer: [
          { required: true, message: "发货客户不能为空", trigger: "change" }
        ],
        receiveGoodsMobile: [
          { required: true, message: "收货电话不能为空", trigger: "blur" }
        ],
        receiveGoodsAddress: [
          { required: true, message: "收货地址不能为空", trigger: "blur" }
        ],
        receiveGoodsCustomer: [
          { required: true, message: "收货客户不能为空", trigger: "change" }
        ],
        vehicleLicenseNumber: [
          { required: true, message: "车牌号码不能为空", trigger: "blur" }
        ],
        contactMobile: [
          { required: true, message: "联系电话不能为空", trigger: "blur" }
        ],
        goodsType: [
          { required: true, message: "货物类型不能为空", trigger: "change" }
        ],
        freightWeight: [
          { required: true, message: "重量(吨)不能为空", trigger: "blur" }
        ],
        settlementCustomer: [
          { required: true, message: "结算客户不能为空", trigger: "change" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getOption();
  },
  mounted() {
    this.$nextTick(() =>{
      // 根据浏览器高度设置初始高度 - 按钮行高度28 - 页码行高度28 - （面包屑+TAB行）高度160
      this.queryHeight = this.$refs.queryForm.$el.offsetHeight;
      this.tableHeight = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 28 - 28 - 160;
      // 监听浏览器高度变化，改变表格高度
      window.onresize = () =>{
        this.tableHeight = window.innerHeight - this.$refs.queryForm.$el.offsetHeight - 28 - 28 - 160;
      }
    })
  },
  methods: {
    /** 查询运输计划列表 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      if (null != this.daterangeDispatchDate && '' != this.daterangeDispatchDate) {
        this.queryParams.params["beginDispatchDate"] = this.daterangeDispatchDate[0];
        this.queryParams.params["endDispatchDate"] = this.daterangeDispatchDate[1];
      }
      if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
        this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
        this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
      }
      listPlan(this.queryParams).then(response => {
        this.planList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        transportPlanId: null,
        transportPlanNumber: null,
        transportPlanStatus: null,
        dispatchDate: null,
        sendGoodsCustomer: null,
        sendGoodsPerson: null,
        sendGoodsMobile: null,
        beginFlowDirection: null,
        sendGoodsAddress: null,
        receiveGoodsCustomer: null,
        receiveGoodsPerson: null,
        receiveGoodsMobile: null,
        endFlowDirection: null,
        receiveGoodsAddress: null,
        goodsType: null,
        freightWeight: null,
        freightPiece: null,
        despatchVehicleNumber: null,
        despatchWeight: null,
        despatchPiece: null,
        remainWeight: null,
        remainPiece: null,
        dispatchVehicleNumber: null,
        remark: null,
        dataRealm: null,
        parkCode: null,
        delFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.daterangeDispatchDate = [];
      this.daterangeCreateTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.transportPlanId)
      this.single = selection.length!==1
      this.multiple = !selection.length
      this.selectList = selection;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加运输计划";
      this.$set(this.form, 'transportPlanStatus', '待派车');
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const transportPlanId = row.transportPlanId || this.ids
      getPlan(transportPlanId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改运输计划";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.transportPlanId != null) {
            updatePlan(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPlan(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const transportPlanIds = row.transportPlanId || this.ids;
      let information;
      if(isNotNull(row.transportPlanNumber)){
        information = '是否删除计划单"' + row.transportPlanNumber + '"？';
      } else {
        information = '是否删除计划单？';
      }
      this.$modal.confirm(information).then(function() {
        return delPlan(transportPlanIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('transport/plan/export', {
        ...this.queryParams
      }, `汽运计划_${this.parseTime(new Date(), '{y}{m}{d}_{h}{i}')}.xlsx`)
    },
    computeTableHeight(){
      if( this.showSearch==true ){
        this.tableHeight = window.innerHeight - this.queryHeight - 28 - 28 - 160;
      } else {
        this.tableHeight = window.innerHeight - 28 - 28 - 160;
      }
    },
    getOption() {
      /** 字典项客户*/
      listCustomerOption().then(response => {
        this.customerOptions = response.data;

//        console.log('this.customerOptions',this.customerOptions);
      });
      listFlowOption().then(response => {
//        this.beginFlowOptions = JSON.parse(JSON.stringify(response.data));
        this.flowOptions = response.data;

      });
    },
    /** 派车按钮操作 */
    handleDispatch(row) {
      //console.log('handleDispatch',row);
      //this.$refs.dispatchDialog.init(true, '派车操作', row.transportPlanNumber, row);
      this.$refs.dispatchDialogExt.init(true, '派车操作', row.transportPlanNumber, row);
    },
    handleRowClick(row, column, event){
      //console.log("row = ", row.enterWarehouseNumber);
      //console.log("column = ", column);
      //console.log("event = ", event);
      if(this.selectList[0] == row)
      {
        this.selectList = [];
        this.$refs['dataList'].clearSelection();
        this.hasSelectRow = [];
      } else {
        this.selectList = [row];
        this.$refs['dataList'].clearSelection();
        this.$refs['dataList'].toggleRowSelection(row, true);
        this.hasSelectRow = [row];
      }
      this.$refs.waybillDetail.getDetailX(row.transportPlanNumber, row);
    },
    handleRemain(){
      this.form.remainWeight = this.form.freightWeight;
      this.form.remainPiece = this.form.freightPiece;
    },
  }
};
</script>

<style scoped lang='less'>
/* 横线 */
.dashed-line{
  border-top: 2px dashed #cac7c7; /* 虚线的宽度、样式和颜色 */
  width: 90%;
  height: 1px;
  margin-left: 40px;
  margin-top: -0.50em;
  margin-bottom: 0.75em;
//  margin:0 auto;
  position: relative;
  text-align: center;
}

//.dashed-line {
//  border-top: 2px dashed #000; /* 虚线的宽度、样式和颜色 */
//  width: 100%; /* 虚线的长度 */
//  margin: 10px 0; /* 虚线的上下间距 */
//}

.el-picker {
  width: 200px !important;
}
.el-select{
  width: 200px;
}
.el-input{
  width: 200px;
}
.address{
  width: 510px;
}

.remark{
  width: 510px;
}

/*/deep/的意思大概为深入的，深远的。Scoped CSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。*/
/*在打包的时候会生成一个独一无二hash值，这样父组件的样式就不会影响到子组件了，要想修改子组件的样式，*/
/*一般是提取一个公共文件，在公共文件里面修改样式.提取公共文件的方式来修改，以达到自己想要的，但是同时其他地方也会受到影响*/
/*需要有一个方法或者方式，既不影响到别的地方，又能修改子组件在当前的样式。*/
/deep/.color-date-danger{
  background: red;
}
/deep/.color-date-warning{
  background: rgb(255, 255, 0);
}

/* 横线 */
.line{
  float:right;
  width: 100%;
  height: 1px;
  margin-top: 0.5em;
  margin-bottom: 0.25em;
  background:#d4c4c4;
  position: relative;
  text-align: center;
}

</style>
